<!--suppress ALL -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">

      <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-search">添加用户</el-button>
          </div>
        </el-col>
      </el-row>

      <el-table :data="users" stripe style="width: 100%" border>

        <el-table-column type="index" width="50">
        </el-table-column>

        <el-table-column prop="username" label="用户姓名" width="180">
        </el-table-column>

        <el-table-column prop="age" label="年龄" width="100">
        </el-table-column>

        <el-table-column prop="email" label="邮箱">
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" width="170">
        </el-table-column>

        <el-table-column prop="deleted" label="状态" width="80">
          <template slot-scope="scope">
            <!--            {{scope.row}}-->
            <el-switch v-model="scope.row.deleted===0" @change="changeStatus(scope.row)" active-color="#13ce66"
                       inactive-color="#ff4949">

            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>

      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.current"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "User",
    data() {
      return {
        users: [
          // {
          //   username: '',
          //   age: '',
          //   email: '',
          //   createTime: '',
          //   deleted: ''
          // }
        ],
        total: 0,
        queryInfo: {
          query: undefined,
          current: 1,
          size: 2
        }
      }
    },
    created() {
      this.getUserList();
    },
    methods: {
      async getUserList() {
        await this.myAxios.get('/vueUser/user/list', {
          params: this.queryInfo
          // params: {
          //   query: undefined,
          //   current: 1,
          //   size: 2
          // }

        })
          .then(res => {
            this.users = res.result.records;
            this.total = res.result.total;
            console.log(res);
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.queryInfo.size = val;
        this.getUserList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryInfo.current = val;
        this.getUserList();
      },
      changeStatus(row) {
        console.log(row);
      }
    }

  }
</script>

<style scoped>

</style>
